<template>
  <div class="match-details-page">
    <!-- 页面头部 -->
    <el-card class="page-header">
      <div class="header-content">
        <div class="title-section">
          <h2>赛事详情管理</h2>
          <p>查看和管理具体赛事的详细数据</p>
        </div>
        <div class="action-section">
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增记录
          </el-button>
          <el-button @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回列表
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 搜索筛选区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="赛事名称">
          <el-input 
            v-model="searchForm.tournament_name" 
            placeholder="请输入赛事名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="选手姓名">
          <el-input 
            v-model="searchForm.player_name" 
            placeholder="请输入选手姓名"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="比赛时间">
          <el-date-picker
            v-model="searchForm.match_time"
            type="datetime"
            placeholder="请选择比赛时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-card class="action-card">
      <div class="action-buttons">
        <el-button type="danger" @click="handleBatchDelete">
          <el-icon><Delete /></el-icon>
          批量删除
        </el-button>
        <el-button type="success" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
        <el-button type="info" @click="handleImport">
          <el-icon><Upload /></el-icon>
          导入数据
        </el-button>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <vxe-table
        ref="tableRef"
        :data="tableData"
        :loading="loading"
        border
        stripe
        height="500"
        :checkbox-config="{ highlight: true }"
        :pager-config="pagerConfig"
        @page-change="handlePageChange"
        @checkbox-change="handleCheckboxChange"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="60" title="序号"></vxe-column>
        <vxe-column field="tournament_name" title="赛事名称" width="150"></vxe-column>
        <vxe-column field="player_a" title="选手A" width="120"></vxe-column>
        <vxe-column field="player_b" title="选手B" width="120"></vxe-column>
        <vxe-column field="big_score" title="大比分" width="100" align="center"></vxe-column>
        <vxe-column field="detailed_score" title="具体比分" width="200"></vxe-column>
        <vxe-column field="match_time" title="比赛时间" width="180"></vxe-column>
        <vxe-column field="status" title="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleView(row)"
            >
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button 
              type="warning" 
              size="small" 
              @click="handleEdit(row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              @click="handleDelete(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
    getStatusType, 
    getStatusText,
    goBack,
    handleAdd,
    handleView,
    handleEdit,
    handleDelete,
    handleBatchDelete,
    handleExport,
    handleImport,
    handleSearch,
    handleReset,
    handlePageChange,
    handleCheckboxChange,
    tableData,
    tableRef,
    searchForm,
    pagerConfig,
    loading
} from './index'
</script>

<style scoped>
.match-details-page {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 20px;
}

.title-section p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.search-card,
.action-card,
.table-card {
  margin-bottom: 20px;
}

.search-card .el-form {
  margin: 0;
}

.search-card .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.table-card {
  min-height: 600px;
}
</style>